<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理</title>
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <hr class="layui-bg-red">
    <form id="attendanceForm" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" autofocus lay-verify="required|name" lay-verType="tips"
                       placeholder="请输入姓名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" name="type">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block">
                <select name="type" lay-verify="required" lay-verType="tips">
                    <option value="">请选择工作类型</option>
                    <option value="上班">上班</option>
                    <option value="下班">下班</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="workTime"  name="workTime"  readonly="" placeholder="年-月-日 时:分:秒">
            </div>
        </div>
        <%--<div class="layui-form-item">
            <label class="layui-form-label">IP</label>
            <div class="layui-input-block">
                <input type="text" name="ip" lay-verify="required|ip" lay-verType="tips" placeholder="请输入ip地址"
                       autocomplete="off" class="layui-input">
            </div>
        </div>--%>
        <div class="layui-form-item">
            <input type="hidden" name="status">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="status" lay-verify="required" lay-verType="tips">
                    <option value="">请选择工作状态</option>
                    <option value="正常">正常</option>
                    <option value="迟到">迟到</option>
                    <option value="早退">早退</option>
                    <option value="旷工">旷工</option>
                    <option value="请假">请假</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" name="work">
            <label class="layui-form-label">性质</label>
            <div class="layui-input-block">
                <select name="work" lay-verify="">
                    <option value="">请选择工作性质</option>
                    <option value="外出">外出</option>
                    <option value="加班">加班</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="cause" lay-verify="" placeholder="请输入备注内容"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="addAll">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.$;
        var baseUrl = '${pageContext.request.contextPath}/attendance/';

        /*发送ajax请求访问后台*/
        function sendAjaxPostReq($, param, method) {
            $.post(
                baseUrl + method,
                param,
                function (result) {
                    if (result.code == 0) {
                        layer.msg(result.msg, {icon: 1, time: 500}, function () {
                            parent.window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg, {icon: 5, anim: 6});
                    }
                },
                "json"
            );
        }

        //自定义验证规则
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }
            }/*,
            /!*ip地址范围：0~255 . 0~255 . 0~255 . 0~255*!/
            ip: function (value, item) {
                if (!new RegExp("(?:(?:1[0-9][0-9]\\.)|(?:2[0-4][0-9]\\.)|(?:25[0-5]\\.)|(?:[1-9][0-9]\\.)|(?:[0-9]\\.)){3}(?:(?:1[0-9][0-9])|(?:2[0-4][0-9])|(?:25[0-5])|(?:[1-9][0-9])|(?:[0-9]))").test(value)) {
                    return 'ip地址输入错误';
                }
            }*/
        });
        /*表单提交*/
        form.on('submit(addAll)', function (data) {
            sendAjaxPostReq($, data.field, "addAll");
            return false;
        });


        //日期时间选择器
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#workTime'
                ,format:"yyyy-MM-dd HH:mm:ss"
                , trigger: 'click'
                , type: 'datetime'
                , theme: 'grid'
            });
        });

    });

</script>
</body>
</html>
